<template>
  <transition name="bounce">

  <!-- 图片弹层 -->
    <transition name="bounce">
  <div class="details" v-if="BannerShow" @mouseover="modelShow = true"  @mouseout="modelShow = false">
<!--    <div class="title titled">
      <p @click="goPictrue()">
        <span class="el-icon-back"></span>

      </p>
    </div> -->
    <img :src="BannerDataList[0].ImgUrl" style="width: 100%;height: 100%;position: relative;">
    <div class="bigImg" v-for="item in bigImgPosi.PlatFormRects_B" :style="{top:bigImgPosi.PlatFormRects_A[0].InitHeight >= 663 ? ((item.Top/(bigImgPosi.PlatFormRects_A[0].InitHeight/663).toFixed(2))-50+'px') : ((663/bigImgPosi.PlatFormRects_A[0].InitHeight).toFixed(2)*(item.Top-30)+20+'px'),left:bigImgPosi.PlatFormRects_A[0].InitWidth >= 1000 ? (item.Left/(bigImgPosi.PlatFormRects_A[0].InitWidth/1000).toFixed(2)+'px') : ((1000/bigImgPosi.PlatFormRects_A[0].InitWidth).toFixed(2)*(item.Left-15)+20+'px')}">
      <p>{{item.Result}}</p>
      <div :style="{height:bigImgPosi.PlatFormRects_A[0].InitHeight >= 663 ? (item.Height/(bigImgPosi.PlatFormRects_A[0].InitHeight/663).toFixed(2)+'px') : ((663/bigImgPosi.PlatFormRects_A[0].InitHeight).toFixed(2)*item.Height+'px'),width:bigImgPosi.PlatFormRects_A[0].InitWidth >= 1000 ? (item.Width/(bigImgPosi.PlatFormRects_A[0].InitWidth/1000).toFixed(2)+'px') : ((1000/bigImgPosi.PlatFormRects_A[0].InitWidth).toFixed(2)*item.Width+'px')}">
      </div>
    </div>
    <div class="deleteModel" v-show="modelShow">
      <img src="../../assets/img/deleteModel.png" style="float: right;width: 25px;height: 25px;margin: 6px;cursor: pointer;" @click="deletemodel">
    </div>
  </div>
    </transition>
   </transition>
</template>

<script>
  // 引入swiper
  import Swiper from "swiper";
  import {
    ExposureDetailAll,
    PlatformPics,
    PlatformPicDetail,
    PlatFormRects
  } from "../../request/api"


  export default {
    data() {
      const self = this
      return {
        BigImgSrc: '',
        PictrueShow: false,
        item: '',
        FiveList: [],
        ProcessingResultsUrl: '',
        ProcessingData: '',
        ExaminationPersonUrl: '',
        CheckData: '',
        indeImg: '',
        UnqualifiedItemsDataList: [],
        UNQualifiedItemsImg: [],
        UnqualifiedItemsData: '',
        InspectOptionListData: [],
        QualifiedItemsImg: [],
        QualifiedItemsData: '',
        allList:[],
        indId:'',
        modelShow:false,
        // 执法详情数据
        EnforcementList: [],
        // 显示哪一个
        indexActive: 0,
        // 执法详情显示
        EnforcementComentShow: false,
        // 智能预警显示
        EarlyWarning: true,
        bigImgPosi:[],
        // 曝光问题门店
        BannerComponeyData: '德庆门国际会议中心',
        tableData: [{
          index: 0
        }, {
          index: 2
        }, {
          index: 3
        }, {
          index: 4
        }],
        // 存储数据
        BannerDataList: [{
          index: 0
        }],
        // Banner层显示
        BannerShow: false,
        // 门店名称
        StoreName: '',
        // 曝光问题
        ExporseQuestion: '',
        // 曝光问题时间
        ExporseTime: '',
        // 执法人
        LawPerson: '',
        // 联系人
        ContactPerson: '',
        // 图片地址
        PicList: [],
        ElectronicInspectId: 'b605584e-a89c-4a55-8338-dfbe2a017b7e',
        AppId: '',
        Index: 0,
        imgResult: [], //问题图片定位
        ChooseButtonList: [{
            name: '智能预警'
          },
          {
            name: '执法详情'
          }
        ]
      }
    },
    created() {

    },
    mounted() {
      this.GetBannerData()
      setInterval(()=>{
         // this.GetBannerData('11')
         // this.BannerShow = true;
         this.$emit('GoMapBanner', this.BannerShow)
      },3000)
      setTimeout(()=>{
        // this.BannerShow = true
         this.$emit('GoMapBanner', this.BannerShow)
      },500)
      setTimeout(()=>{
        this.BannerShow = false
         this.$emit('GoMapBanner', this.BannerShow)
      },4000)
    },
    props: ['GoBanner', 'imgID'],
    watch: {
      imgID(val) {
        this.indId = val;
        this.getPlatformPicDetail(val)
        this.showBigImg(this.BannerDataList[0])
        this.GetPlatFormRects(val)
      },
      GoBanner(val) {
        this.BannerShow = val
      }
    },
    methods: {
      // 关闭model事件
      deletemodel(){
        this.BannerShow = false
         this.$emit('GoMapBanner', this.BannerShow)
      },
      // 关闭放大图片
      CloseBigImg() {
        this.PictrueShow = false;
      },
      showBigImg(e) {
        this.PictrueShow = true;
        this.indeImg = e;
        PlatFormRects({
          RecognizeId: this.indId,
        }).then((res) => {
          this.bigImgPosi = res.SCater.Data
        })
      },
      // 放大图片返回
      goPictrue() {
        this.PictrueShow = false;
      },
      // 点击图片放大
      imgBig(item) {
        this.BigImgSrc = item
        this.PictrueShow = true;
        // this.DetailsContentShow = false;
      },
      // 切换按钮
      ChooseClick(val) {
        // console.log(val,'-------切换')
        this.indexActive = val
        if (val == 0) {
          this.EarlyWarning = true
          this.EnforcementComentShow = false
          this.$nextTick(() => {
            // this.GetBannerData()
            // this.GetInspectOptionDetailInfoUrl()
            this.initSwiper()
          })
        } else {
          this.EarlyWarning = false
          this.EnforcementComentShow = true
          this.$nextTick(() => {
            // this.GetBannerData()
            // this.GetInspectOptionDetailInfoUrl()
            this.initSwiper()
          })
        }
      },
      // 延时出现

      // swiper操作
      initSwiper() {
        var swiper = new Swiper('.swiper-container3', {
          loop: true,
          // autoplay: {
          //     delay: 5000,
          //     stopOnLastSlide: false,
          //     disableOnInteraction: true,
          // },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            type: 'fraction',
          },
          on: {
            slideChangeTransitionEnd() {
              self.Index = this.realIndex
              // console.log(self.Index)
            },
          },

          // mousewheel: true,
        });

      },
      // 关闭Swiper层
      CloseBanner() {
        this.BannerShow = false
        this.$emit('GoMapBanner', this.BannerShow)
      },
      // 获取底部轮播图数据
      GetBannerData(e) {
        PlatformPics({
          code: 'all',
          AppId: this.$getParams('appid'),
          EBCOrganizationId: '',
          UserId: this.$getParams('userid')
        }).then((res) => {
          this.allList = res.SCater.Data.PlatformPics_A;
          e ?  this.initEvent = res.SCater.Data.PlatformPics_A[0] : this.initEvent = res.SCater.Data.PlatformPics_A[3];
          this.getPlatformPicDetail(this.initEvent.RecognizeId)
          this.GetPlatFormRects(this.initEvent.RecognizeId)
          this.indId = this.initEvent.RecognizeId
          this.showBigImg()
          setTimeout(()=>{
            this.BannerShow = false
             this.$emit('GoMapBanner', this.BannerShow)
          },4000)
        })
      },
      getPlatformPicDetail(e) {
        PlatformPicDetail({
          AppId: this.$getParams('appid'),
          RecognizeId: e,
          UserId: this.$getParams('userid')
        }).then((res) => {
          this.BannerDataList = res.SCater.Data.PlatformPicDetail_A;
        })
      },
      // 图片问题定位
      GetPlatFormRects(e) {
        PlatFormRects({
          RecognizeId: e,
        }).then((res) => {
          this.imgResult = res.SCater.Data
        })
      },
      // 图片显示不出来
      imgError(item) {
        item.img = require("../../assets/img/kitchen.jpg");
      },
      ChangeName() {
        // console.log(swiper.activeIndex)
      },

    }
  }
</script>

<style scoped>
  ::-webkit-scrollbar {
    display: none;
  }

  /*  */
  @keyframes fade-in {
    0% {
      opacity: 0;
      top: 0;
      left: 30%;
      right: 0
    }

    ;

    /*初始状态 透明度为0*/
    20% {
      opacity: 0.2;
      top: 0;
      right: 60%;
      left: 0;
    }

    ;

    40% {
      opacity: 0.4;
      left: -10%;
      right: 0
    }

    ;

    /*过渡状态 透明度为0*/
    60% {
      opacity: 0.6;
      right: 40%;
      left: 0;
    }

    ;

    /*过渡状态 透明度为0*/
    80% {
      opacity: 0.8;
      left: 2%;
      right: 0
    }

    ;

    /*过渡状态 透明度为0*/
    100% {
      opacity: 1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto
    }

    ;
    /*结束状态 透明度为1*/
  }

  @-webkit-keyframes fade-in {

    /*针对webkit内核*/
    0% {
      opacity: 0;
      top: 0;
      left: -20%;
      right: 0
    }

    /*初始状态 透明度为0*/
    20% {
      opacity: 0.2;
      top: 0;
      right: 60%;
      left: 0;
    }

    40% {
      opacity: 0.4;
      left: -10%;
      right: 0
    }

    /*过渡状态 透明度为0*/
    60% {
      opacity: 0.6;
      right: 40%;
      left: 0;
    }

    /*过渡状态 透明度为0*/
    80% {
      opacity: 0.8;
      left: 2%;
      right: 0
    }

    /*过渡状态 透明度为0*/
    100% {
      opacity: 1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto
    }

    /*结束状态 透明度为1*/
  }

  /* #BannerApp{
    animation: fade-in;
    animation-duration: 2s;
    -webkit-animation:fade-in 2s
} */
  .swiper-pagination-bullet-active {
    color: #007aff !important;

  }

  .swiper-button-prev {
    width: 36px;
    height: 49px;
    color: #007aff !important;
    font-size: 36px;
    position: absolute;
    left: -20px;
  }

  .swiper-button-next {
    width: 36px;
    height: 49px;
    color: #007aff !important;
    font-size: 36px;
  }
</style>
<style scoped>
  @import "../../../node_modules/swiper/css/swiper.css";

  .details {
    width: 1000px;
    height: 720px;
    background: rgba(18, 19, 49, 0.9);
    /* border: 2px solid rgba(61, 164, 251, 0.5); */
    border-radius: 2px;
    position: absolute;
    top: -160px;
    left: -2px;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 350;
  }

  .details .title {
    width: 100%;
    height: 58px;
    background: rgba(18, 19, 49, 0.9);
    border-bottom: 2px solid rgba(61, 164, 251, 0.5);
    border-radius: 2px;
    font-size: 18px;
    font-family: PingFang-SC-Regular;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }

  .details .titled p {
    line-height: 50%;
    cursor: pointer;
    padding-top: 0 !important;
  }

  .details .titled p .el-icon-back {
    width: 40px;
    color: rgb(21, 92, 188);
    font-size: 50px;
  }

  .ChooseButton .active {
    color: #FF524F
  }

  .ChooseButton {
    margin-left: -30px;
  }
  .bigImg div{
    border: 2px solid red;
    margin-top: 10px;
  }
  .bigImg p{
    color: #FFFFFF;
    background-color: rgba(0,0,0,0.5);
    border-radius: 10px;
    padding: 8px;
    text-align: center;
  }
  .BannerMain {
    color: #fff;
    width: 1000px;
    height: 600px;
    background: rgba(18, 19, 49, 1);
    border: 2px solid rgba(61, 164, 251, 0.5);
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 2000;
  }
  .bounce-enter-active {
    animation: bounce-in .5s;
  }
  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(0) translateY(1000px);
      opacity: 0;
    }
    40% {
      opacity: 0;
    }
    30% {
      opacity: 0;
    }
    20% {
      opacity: 0;
    }
    10% {
      opacity: 0;
    }
    100% {
      transform: scale(1);
    }
  }
  .title {
    width: 100%;
    height: 50px;
    background: rgba(18, 19, 49, 0.9);
    border-bottom: 2px solid rgba(61, 164, 251, 0.5);
    border-radius: 2px;
    font-size: 18px;
    font-weight: bold;
    line-height: 50px;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center
  }

  .BannerComent {
    width: 100%;
    overflow: hidden;
    height: calc(100% - 50px);
    padding: 20px 15px 0 15px;
    box-sizing: border-box;
  }

  .BannerComent .Content {
    width: 100%;
    height: 100%;
    /* background: pink; */
    padding-top: 0px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
  }

  .swiper-pagination {
    width: 100%;
    height: 30px;
    /* background: red; */
    overflow-x: scroll;
    line-height: 30px;
    font-size: 13px;
    display: flex;
    justify-content: center;
  }

  .swiper-pagination-bullet-active {
    background: #007aff;
    color: #007aff !important;
  }

  .swiper-button-prev {
    width: 36px;
    height: 49px;
    color: #007aff;

  }

  .ContentList {
    width: 900px;
    height: 400px;
    /* background: red; */
    margin-left: 8px;
    display: flex;
    justify-content: space-between;
    /* flex-direction: column */
  }

  .ContentList .ListLeft {
    width: 50%;
    height: 88%;
    border-right: 1px solid rgba(255, 255, 255, .2);
    font-size: 20px;
  }

  .ContentList .text {
    width: 100%;
    height: 250px;
    display: flex;
    flex-direction: column;
    padding-left: 8px;
    box-sizing: border-box;
  }
  .ContentList .text p{
    margin-top: 30px;
  }
  .ListRight {
    width: 50%;
    height: 100%;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 20px;
    /* display: flex;
    justify-content: center;
    align-items: center; */
  }

  .ListRight .ImgComent {
    width: 100%;
    height: calc(100% - 30px);
    padding-top: 20px;
    box-sizing: border-box;
    position: relative;
  }

  .center {
    width: 100%;
    height: calc(100% - 280px);
    padding: 20px;
    box-sizing: border-box;
  }

  .center .con {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }

  .QualifiedItems {
    width: 49%;
    height: 100%;
    color: #0abe0a;
    font-size: 30px;
  }

  .QualifiedItems .titleSign {
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 30px;
  }

  .QualifiedItems .ImgList {
    width: 100%;
    height: calc(100% - 30px);
    color: #fff;
    font-size: 14px;
    overflow-y: scroll;


  }

  .QualifiedItems .ImgTitle {
    width: 100%;
    height: 16px;
    line-height: 16px;
    float: left;
    margin-bottom: 20px;
  }

  .QualifiedItems .ImgCon {
    width: 100%;
    line-height: 40px;
    float: left;

  }

  .QualifiedItems .ImgListimg {
    display: block;
    float: left;
    width: 80px;
    height: 30px;
    border-radius: 4px;
  }



  .line {
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
  }

  .UnqualifiedItems {
    width: 49%;
    height: 100%;
    color: #cb2424;
    font-size: 30px;
  }

  .UnqualifiedItems .titleSign {
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 30px;
  }
  .bigImg{
    position: absolute;
  }
  .bigImg img{
    border: 2px solid red;
  }
  .UnqualifiedItems .ImgList {
    width: 100%;
    height: calc(100% - 30px);
    color: #fff;
    font-size: 14px;
    overflow-y: scroll;


  }

  .UnqualifiedItems .ImgTitle {
    width: 100%;
    height: 16px;
    line-height: 16px;
    float: left;
  }

  .UnqualifiedItems .ImgCon {
    width: 100%;
    line-height: 40px;
    float: left;

  }

  .UnqualifiedItems .ImgListimg {
    display: block;
    float: left;
    width: 80px;
    height: 30px;
  }

  .SignText {
    width: 100%;
    height: 120px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    justify-content: space-around;
    display: flex;
    color: #fff;
  }
  .deleteModel{
    width: 100%;
    height: 40px;
    background-color: rgba(0,0,0,0.3);
    position: absolute;
    top: -2px;
  }
  .fiveItems {
    width: 30%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 20px;
    box-sizing: border-box;

  }

  .fiveItems img {
    cursor: pointer;
    width: 160px;
    height: 100px;
    border-radius: 4px;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid rgba(61, 164, 251, 0.5);
  }

  .ExaminationResults {
    width: 30%;
    height: 100%;
  }

  .imgReast div {
    border: 2px solid red;
    margin: auto;
    margin-top: 10px;
  }

  .ExaminationResults .result {
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
  }

  .ExaminationResults .text {
    width: 55%;
    height: 50%;
    /* align-items: center; */

  }

  .imgReast {
    position: absolute;
    width: 110px;
  }

  .imgReast p {
    display: block;
    width: 100%;
    text-align: center;
  }

  .ExaminationResults .text img {
    cursor: pointer;
    width: 100px;
    height: 54px;
    border-radius: 4px;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid rgba(61, 164, 251, 0.5);
    display: inline-block;
  }

  .ProcessingResults {
    width: 30%;
    height: 100%;


  }

  .ProcessingResults .result {
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
  }

  .ProcessingResults .text {
    width: 55%;
    height: 50%;
    /* align-items: center; */

  }

  .ProcessingResults .text img {
    cursor: pointer;
    width: 100px;
    height: 54px;
    border-radius: 4px;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid rgba(61, 164, 251, 0.5);
    display: inline-block;
  }
</style>
